<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader />
		</view> -->
		<view class="install-container">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
				<!-- <uni-forms-item label="所属分区：" name="所属分区">
					<view :class="label == '请选择所属分区' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('所属分区',$event)" v-model="params['分区id']"
					 mode="selector" :list="partitionList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item> -->
				<uni-forms-item required label="所属楼栋：" name="所属楼栋id">
					<view :class="label1 == '请选择所属楼栋' ? 'color':''" class="tap" @click="handleTap('picker1')">{{label1}}</view>
					<lb-picker ref="picker1" @click="handleTap('picker1')" @input="binddata('所属楼栋id',$event)" v-model="value"
					 mode="selector" :list="buildList" :dataset="{ name: 'label1' }" @confirm="handleConfirm1" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="所属单元：" name="所属单元id">
					<view :class="label2 == '请选择所属单元' ? 'color':''" class="tap" @click="handleTap('picker2')">{{label2}}</view>
					<lb-picker ref="picker2" @click="handleTap('picker2')" v-model="value1"
					 mode="selector" :list="unitList" :dataset="{ name: 'label2' }" @confirm="handleConfirm2" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required label="房屋号：" name="房屋号">
					<input style="font-size: 30rpx;" maxlength="18" v-model="params['房屋号']" placeholder="请输入房屋号" @input="binddata('房屋号',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房屋类型：" name="房屋类型">
					<view :class="label3 == '请选择房屋类型' ? 'color':''" class="tap" @click="handleTap('picker3')">{{label3}}</view>
					<lb-picker ref="picker3" @click="handleTap('picker3')" @input="binddata('房屋类型',$event)" v-model="value2"
					 mode="selector" :list="roomTypeList" :dataset="{ name: 'label3' }" @confirm="handleConfirm3" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required label="证件类型：" name="证件类型">
					<view :class="label4 == '请选择证件类型' ? 'color':''" class="tap" @click="handleTap('picker4')">{{label4}}</view>
					<lb-picker ref="picker4" @click="handleTap('picker4')" @input="binddata('证件类型',$event)" v-model="value3"
					 mode="selector" :list="cardTypeList" :dataset="{ name: 'label4' }" @confirm="handleConfirm4" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item required label="证件编号：" name="证件编号">
					<input type="idcard" maxlength="18" v-model="params['证件编号']" placeholder="请输入证件编号" @input="binddata('证件编号',$event.detail.value)">
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item required label="房屋面积：" name="房屋面积">
					<input type="number" maxlength="50" v-model="params['房屋面积']" @input="binddata('房屋面积',$event.detail.value)" placeholder="请填写房屋面积">
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['消防重点关注对象']" :localdata="status1"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item required label="房屋面积：" name="房屋面积">
					<input maxlength="50" v-model="params['居住出租房屋']['可居住房间数']" placeholder="请输入房屋面积" @input="binddata('carNo',$event.detail.value)">
				</uni-forms-item> -->
				<uni-forms-item v-if="params['房屋类型'] == 2" required name="是否分隔" label="是否有改变原有结构的隔断：">
					<uni-data-checkbox v-model="params['是否分隔']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required v-if="params['房屋类型'] == 2"  label="可居住房间数：" name="可居住房间数">
					<input type="number" maxlength="50" v-model="params['可居住房间数']" placeholder="请输入可居住房间数" @input="binddata('可居住房间数',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item v-if="params['房屋类型'] == 2"  required label="人均房屋面积：" name="平均房屋面积">
					<input type="number" maxlength="50" v-model="params['平均房屋面积']" placeholder="请输入人均房屋面积" @input="binddata('平均房屋面积',$event.detail.value)">
				</uni-forms-item>
				<!-- <uni-forms-item required label="具体位置：" name="roomIds">
					<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
				</uni-forms-item> -->
				<uni-forms-item label="备注信息：" name="备注">
					<input maxlength="50" placeholder="请填写备注信息" v-model="params['备注']">
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	
	import { showModal } from '@/utils/common.js'
	export default {
		components: {
			uploader,
			DatePicker,
			LbPicker
		},
		data() {
			return {
				label: '请选择所属分区',
				label1: '请选择所属楼栋',
				label2: '请选择所属单元',
				label3: '请选择房屋类型',
				label4: '请选择证件类型',
				value: '',
				value1: '',
				value2: '',
				value3: '',
				installTypeList: this.$type.installTypeList,
				params: {
					网格id: null,
					检查点id: null,
					所属楼栋id: null,
					所属单元id: null,
					房屋号: '',
					房屋类型: null,
					房屋面积: null,
					证件类型: null,
					证件编号: null,
					备注: null,
					照片上传: null,
					消防重点关注对象: null,
					是否分隔: null,
					可居住房间数: null,
					平均房屋面积: null,
					出租房参数: {
						是否分隔: null,
						可居住房间数: null,
						平均房屋面积: null
					}
				},
				params1: {
					网格id: null,
					检查点id: null
				},
				params2: {
					网格id: null,
					检查点id: null,
					分区id: null
				},
				params3: {
					网格id: null,
					检查点id: null,
					楼栋id: null
				},
				cardTypeList: [{
					id: '1',
					value: '房产证',
					label: '房产证'
				}, {
					id: '2',
					value: '土地使用证',
					label: '土地使用证'
				}],
				roomTypeList: this.$type.roomTypeList,
				status: [{
						text: '是',
						value: '1'
					},
					{
						text: '否',
						value: '2'
					}
				],
				status1: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				partitionList: [],
				unitList: [],
				buildList: [],
				//表单验证规则
				rules: {
					所属楼栋id: {
						rules: [{
							required: true,
							errorMessage: '请选择所属楼栋',
						}]
					},
					房屋号: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋号',
						}]
					},
					房屋类型: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋性质',
						}]
					},
					证件类型: {
						rules: [{
							required: true,
							errorMessage: '请填写证件类型',
						}]
					},
					证件编号: {
						rules: [{
							required: true,
							errorMessage: '请填写证件编号',
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							errorMessage: '请选择是否是消防重点关注对象',
						}, ]
					},
					房屋面积: {
						rules: [{
							required: true,
							errorMessage: '请填写房屋面积'
						}]
					},
					平均房屋面积: {
						rules: [{
							required: true,
							errorMessage: '请填写人均房屋面积'
						}]
					},
					可居住房间数: {
						rules: [{
							required: true,
							errorMessage: '请填写可居住房间数'
						}]
					},
					是否分隔: {
						rules: [{
							required: true,
							errorMessage: '请填写是否有改变原有结构的隔断'
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.检查点id = +options.id
			this.params.网格id = uni.getStorageSync('gridInfo').所属网格id
			this.params1.检查点id = +options.id
			this.params1.网格id = uni.getStorageSync('gridInfo').所属网格id
			// this.getPartitionList()
			this.getBuildList()
		},
		methods: {
			getBuildList() {
				this.$http.post('gridSystem/building/list', this.params1).then(res => {
					console.log(res)
					if (res.code === 10000) {
						if (res.data.list !== null) {
							this.$common.buildList(res.data.list)
						}
						this.buildList = res.data.list
					}
				})
			},
			getUnitList() {
				this.$http.post('gridSystem/unit/list', this.params3).then(res => {
					console.log(res)
					if(res.code === 10000){
						if(res.data.list !== null) {
							res.data.list.forEach(item => {
								if(!item.单元号.includes('单元')) {
									item.单元号 = item.单元号 + '单元'
								}
								item.value = item.单元号
								item.label = item.单元号
							})
						}
						this.unitList = res.data.list
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			// 楼栋
			handleConfirm1(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params3.楼栋id = e.item.楼栋id
					this.params.所属楼栋id = e.item.楼栋id
					this.getUnitList()
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 单元
			handleConfirm2(e) {
				console.log(e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.所属单元id = e.item.单元id
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 房屋类型
			handleConfirm3(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.房屋类型 = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 证件类型
			handleConfirm4(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.证件类型 = e.item.id
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					res.房屋面积 = res.房屋面积 && parseFloat(res.房屋面积)
					this.params.房屋面积 = parseFloat(res.房屋面积)
					this.params.出租房参数.是否分隔 = res.是否分隔
					this.params.出租房参数.可居住房间数 = parseInt(res.可居住房间数) 
					this.params.出租房参数.平均房屋面积 = parseFloat(res.平均房屋面积)
					let obj = JSON.parse(JSON.stringify(this.params))
					obj.是否分隔 = null
					obj.可居住房间数 = null
					obj.平均房屋面积 = null
					console.log('表单数据信息：', res);
					// console.log(this.params)
					this.addRoom(obj)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			addRoom(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/room/create', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.navigateTo({
							url: '../roomList/roomList?id=' + this.params.检查点id
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.install-container {
		padding-bottom: 90rpx;
	}

	.color {
		color: #808080;
	}
</style>
